<div id="mineModal" class="mine">
  <div class="mine-modal">
    <div class="flex-column">
      <div class="card-white">
        <div class="padding-10 justify-between align-center">
          <a class="align-center padding-y-5 flex-1 width-0 text-ellipsis" href="mine.html">
            <img class="width-height-40 radius-round img-cover margin-right-10" src="./images/ball_park.png" alt="" srcset="" />
            <span>Alxe</span>
          </a>

          <span class="glyphicon glyphicon-menu-right"></span>
        </div>
      </div>

      <div class="padding-x-15 bg-regular margin-top-10">
        <a
          class="padding-y-30 align-center border-bottom-base"
          v-for="(item, index) in [
                {name: 'Notifications', icon: './images/mine/message_icon.png', path: 'mineNotice.html'},
                {name: 'Bookmarks', icon: './images/mine/book_marks_icon.png', path: 'mineFollow.html'},
                {name: 'Language', icon: './images/mine/language_icon.png', path: 'mineLanguage.html'},
                {name: 'Settings', icon: './images/mine/set_icon.png', path: 'mineSettings.html'},
            ]"
          :href="item.path"
        >
          <img class="height-20 margin-right-10" :src="item.icon" alt="" srcset="" />
          <span>{{item.name}}</span>
        </a>
      </div>
    </div>
  </div>
</div>
